<template>
  <div>
    <div class="listright">
      <div class="pro">
        <div class="title">
          {{ pin }}
          <img
            src="https://static.epetbar.com/static_wap/appmall/lib/goods/cate_right_img.png"
          />
        </div>
        <ul class="product">
          <li v-for="tit in namelist" :key="tit.id_param">
            <img :src="tit.photo" />
            <p>{{ tit.name }}</p>
          </li>
        </ul>
      </div>
      <div class="brand">
        <div class="brandtitle">热门品牌</div>
        <ul class="brandlist">
          <li v-for="hot in hotlist" :key="hot.param">
            <div class="imgdiv">
              <img :src="hot.logo" />
            </div>
            <p>{{ hot.name }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon, List } from "vant";
import axios from "axios";
Vue.use(Icon);
export default {
  props: ["name2", "cateid"],

  data() {
    return {
      riglist1: {},
      riglist2: {},
      riglist3: {},
      riglist4: {},
      namelist: [],
      hotlist: [],
      pin:''
    };
  },

  async mounted() {
    this.pin="狗狗主粮"
    var result = await axios.get(
      `/v3/goods/category/main.html?do=getChildren&owner=5&pet_type=dog`
    );

    this.riglist1 = result.data.cate_list[0].list;
    this.riglist2 = result.data.cate_list[1].list;
    for (let key in this.riglist1) {
      this.namelist.push(this.riglist1[key]);
    }
    for (let key in this.riglist2) {
      this.hotlist.push(this.riglist2[key]);
     
    }
    //  console.log(this.hotlist)
  },
  watch: {
    cateid: {
      async handler(newval, old) {
        // console.log(newval);
        this.pin=this.name2
        var result = await axios.get(
          `/v3/goods/category/main.html?do=getChildren&owner=${newval}&pet_type=dog`
        );
        // console.log(result);
        if(newval===4334){
         
          this.riglist3 = result.data.cate_list;
          this.namelist=this.riglist3[0].list
        this.hotlist=[]
        }else{
           this.riglist3 = result.data.cate_list;
        // console.log(this.riglist3);
        this.namelist=this.riglist3[0].list
        this.hotlist=this.riglist3[1].list
       
        }
        
      },
    },
    immediate: true,
  },
};
</script>

<style lang='stylus' scoped>
.listright {
  position: fixed;
  top: 0.4rem;
  bottom: 0.52rem;
  flex: 1;
  background-color: #fff;
  margin-left: 0.75rem;
  border-top: 0.05rem solid #f3f4f5;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  right: 0;
  overflow-y: scroll;
  left: 0.01rem;
}

.pro {
  padding: 0.05rem 0.05rem 0.2rem;
  color: #999;
  font-size: 0.12rem;
  border-bottom: 1px solid #f0f0f0;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.1rem 0 0;

  img {
    height: 0.1rem;
    width: 0.46rem;
  }
}

.product {
  font-size: 0.14rem;
  display: flex;
  padding-top: 0.15rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  li {
    width: 33%;
    text-align: center;
    color: #000;
    font-size: 0.13rem;
  }
  img {
    width: 100%;
  }

  }
.brandtitle {
  margin-left: 0.1rem;
}

.brand {
  height: 19rem;
  margin: 0.1rem 0 0;
  color: #999;
  font-size: 0.12rem;
}

.brandlist {
  display: flex;
  justify-content: center;
  width: 3rem;
  flex-wrap: wrap;

  li{
    margin: 0.1rem 0 0;
    width: 48%;
    text-align: center;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;}

    p {
      width: 100%;
      margin: 0.05rem 0 0;
      text-align: center;
    }

    img {
      height: 0.45rem;
      display: inline-block;
      margin: auto;
      margin-top: 0.04rem;
    }

    .imgdiv {
      // width: 1.35rem;
      width: 94%;
      height: 0.55rem;
      border: 1px solid #f0f0f0;
    }
  }

</style>